<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="handleRedirect('index')"
        >列表</el-button>
      </el-col>
      <el-col :span="1.5" v-if="simple == false">
        <el-button
          type="primary"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="simple = true"
        >简易版</el-button>
      </el-col>
      <el-col :span="1.5" v-if="simple == true">
        <el-button
          type="primary"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="simple = false"
        >常规版</el-button>
      </el-col>
    </el-row>

      <el-calendar>
        <template
          slot="dateCell"
          slot-scope="{date, data}">
            {{ data.day.split('-').slice(2).join('-') }}
            <div v-for="item in fitnessList" :key="item.date">
              <div v-if="item.date == data.day.split('-').slice(0).join('-')">
                <div v-if="simple == false">
                  <div v-for="val in item.value" :key="val.type">
                    <!-- <div style="display:flex">
                      <div style="width:60%">
                        {{ typeDictFormatter(val.type) }}
                      </div>
                      <div>
                        <span v-if="val.status == '1'">✔️</span>
                        <span v-if="val.status == '0'">❌</span>
                      </div>
                    </div>  -->
                    <el-row>
                      <el-col>
                        {{ typeDictFormatter(val.type) }}
                        <span v-if="val.status == '1'">✔️</span>
                        <span v-if="val.status == '0'">❌</span>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div v-else>
                  <el-popover
                    placement="top-start"
                    :title=item.date
                    width="200"
                    trigger="hover"
                    >
                    <el-row v-for="val in item.value" :key="val.type">
                      <el-col>
                        {{ typeDictFormatter(val.type) }}
                        <span v-if="val.status == '1'">✔️</span>
                        <span v-if="val.status == '0'">❌</span>
                      </el-col>
                    </el-row>
                    <el-progress slot="reference" type="circle" :percentage="item.completionRate" :width="45" :height="45" :status="item.completionRate == 100 ? 'success' : ''"></el-progress>
                  </el-popover>
                </div>
              </div>
            </div>
        </template>
      </el-calendar>
    </div>
</template>

<script>
import { listCalendarFitness } from "@/api/fitness/record";
import { dictBasic } from "@/api/fitness/basic";

export default {
  jqmc: "Fitness",
  dicts: ['fitness_unit', 'fitness_type', 'fitness_status'],
  data() {
    return {
      fitnessList: [],
      // 字典
      typeData: [],
      // 是否使用简易版
      simple: true
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询fitness列表 */
    
     getList() {
      this.loading = true;
      dictBasic(this.queryParams).then(response => {
        this.typeData = response.type_map;
      });
      listCalendarFitness(this.queryParams).then(response => {
        this.fitnessList = response.rows;
      });
    },
    /** 切换为其他形式 */
    handleRedirect(route) {
      this.$router.push("/fitness/record-table/"+ route +"/")
    },
    // 类型 字典翻译
    typeDictFormatter(field, column) {
      return this.typeData[field];
    },
    //
    getStatus() {

    }
  }
};
</script>
<style scoped>
.el-progress-circle {
height: 10%;
width: 10%;
}
</style>
